<template>
	<view class="search">
		<!-- uni提供原生组件 -->
		<view>
			<uni-search-bar @blur="blur" @clear="clear" @input="input" :radius="100" cancelButton="none" />
		</view>
		<!-- 搜索内容 -->
		<view class="searchs">
			<view class="searchContent  u-line-1" v-show="searchlist  !== '' ">
				<view class="search-list" v-for="(item,index) in searchlist" :key="item.id">
					<text @click="send(item.goods_id)"> {{item.goods_name}}</text>
				</view>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="hisoty">
			<view class="set">
				<text>历史记录</text>
				<uni-icons @click="clearall" type="trash"></uni-icons>
			</view>
			<view class="hisoty-item" v-if="list !== ''">
				<u-tag class="tag" v-for="(item,index) in list " :key="index" :text="item" shape="circle" closeable :show="close" @close="tagClick" />
			</view>
		</view>
	</view>
</template>
<script>
	import http from '../../utils/http.js'
	export default {
		data() {
			return {
				//延时器 timerId
				timer: null,
				//搜索关键词
				kw: "",
				searchlist: '',
				show: false,
				close: true,
				list:[],
				history:[],
				oldhistory:[]
			};
		},
		methods: {
			input(e) {
				//清除timer对应的延时器
				clearTimeout(this.timer)
				//重新启动一个延时器，并把timerid 赋值 this.timer
				this.timer = setTimeout(() => {
					//如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.kw = e
					this.search()
				}, 500)
			},
			//根据搜索关键词，搜索商品建议列表
			async search() {
				if (this.kw !== '') {
					const {
						data: res
					} = await http.get(`/api/public/v1/goods/qsearch?query=${this.kw}`)
					if (res.message.length == 0) return uni.showToast({
						title: '没有搜索到',
						icon: "none"
					});
					this.searchlist = res.message
				}
			},
			// 清除按钮
			clear(e) {
				this.searchlist = ''
			},
			send(id) {
				uni.navigateTo({
					url: '/subpag/goods_msg/goods_msg?id=' + id
				})
			},
			// 清除tap/
			tagClick(index) {
				this.close = false;
			},
			//失去焦点
			blur(e) {
				if (e.value !== '') {
					this.history.push(e.value)
					// this.oldhistory.push(...this.history)
					let arr = [...this.history,...this.oldhistory]
					let newcotent = Array.from(new Set(arr))
					uni.setStorageSync('history',JSON.stringify(newcotent))
				}
				this.oldhistory = JSON.parse(uni.getStorageSync('history')) || '[]'
				this.list = this.oldhistory
			},
			clearall(){
				// uni.removeStorageSync('history')
			}
		},
		created(){
		
		}
	}
</script>

<style lang="scss" lang="scss">
	// 
	.hisoty-item {
		padding: 0 30upx;
	}

	.hisoty {
		z-index: -1;

		.set {
			padding: 20upx 30upx;
			display: flex;
			justify-content: space-between;
		}
	}

	// 历史记录
	.search-list {
		border-bottom: 1px solid #dadada;
	}

	.searchs {
		background-color: #fff;
		padding: 0 30upx;
		top: 100upx;
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		z-index: 2;
	}

	.searchContent {
		text {
			height: 100upx;
			display: block;
			line-height: 100upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	// 
	.uni-searchbar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		position: relative;
		padding: 16rpx;
		/* 将默认的 #FFFFFF 改为 #C00000 */
		background-color: #c00000;
	}

	.search-box {
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.tag{
		margin-right: 5px;
	}
</style>
